<!DOCTYPE html>
<html xmlns:th = "http://www.thymeleaf.org">
<head th:replace="commons/head::head('首页','')">
</head>
<body>

    <table class="layui-hide"  id="menuList"  lay-filter="menus"></table>

    <script id="barDemo" type="text/html">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="look">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <!-- 提示：如果是采用非模块化方式，此处可换成：layui.all.js -->
    <script th:src="@{/layui/layui.js}"></script>

    <script>
        //JavaScript代码区域
        //如果内置的模块本身是依赖jquery，你无需去use jquery，所以上面的写法其实可以是：
        layui.use(['element', 'layer', 'table'], function() {
            var element = layui.element;  //元素操作
            var layer = layui.layer;  //弹层
            var table = layui.table;  //表格
            var $ = layui.$;  ////由于layer弹层依赖jQuery，所以可以直接得到， 重点处。

            table.render({
                elem: '#menuList',
                // height: 312,   //默认情况。高度随数据列表而适应，表格容器不会出现纵向滚动条
                //height: 'full-100', //高度最大化减去差值
                url: '/menu/list',
                toolbar: 'default', //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": '', //解析提示文本
                        "count": res.totalElements, //解析数据长度
                        "data": res.content //解析数据列表
                    };
                },
                page: true,  //开启分页
                limits: [10, 20, 30, 40, 50], //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。优先级低于 page 参数中的 limits 参数。
                cols: [ //表头
                    [
                        {type: 'checkbox', fixed: 'left'},  //fixed  left：固定在左 right：固定在右， 一旦设定不随滚动条滚动而滚动
                        {field: 'id', title: 'id', sort: true, fixed: 'left', hide: true}, //hide 表示隐藏列
                        {field: 'menuName', title: '菜单名称', sort: true, unresize: true}, //unresize 是否禁用拖拽列宽
                        {field: 'menuIcon', title: '菜单图标', align: 'center', templet: function(d){
                                return '<i class="layui-icon ' + d.menuIcon + '"></i> ';
                            }},
                        /*{field: 'parent', title: '父菜单', sort: true},*/
                        {field: 'orderNum', title: '排序', align: 'center', sort: true},
                        {field: 'createBy', title: '创建人', align: 'center', sort: true},
                        {field: 'createTime', title: '创建时间', align: 'center', sort: true},
                        {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
                    ]
                ],
                text: {  //设置无数据是提示信息
                    none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                },
                skin: 'row', //行边框风格   row 列边框风格  nob 无边框风格
                even: true, //开启隔行背景  false 关闭隔行背景
                size: 'sm' //小尺寸的表格   lg 大尺寸表格
            });

            //监听头工具栏事件
            table.on('toolbar(menus)', function (obj) {
                console.log(obj.event);
                var checkStatus = table.checkStatus(obj.config.id)
                    , data = checkStatus.data; //获取选中的数据 ,  data类型为数组，可以通过JSON.stringify(data)转化后查看

                switch (obj.event) {
                    case 'add':
                        $.post('/menu/create', null, function (res) {
                            if (res.id) {
                                layer.msg('用户创建成功！');

                                //执行重载
                                tbreload();
                            }
                        });
                        break;
                    case 'update':
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else if (data.length > 1) {
                            layer.msg('只能同时编辑一个');
                        } else {
                            layer.alert('编辑 [id]：' + checkStatus.data[0].id);
                        }
                        break;
                    case 'delete':
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else {
                            //layer.msg(JSON.stringify(data));
                            var ids = new Array(data.length);
                            for (var i = 0; i < data.length; i++) {
                                ids[i] = data[i].id;
                            }

                            $.post('/menu/del', {'ids': ids}, function (res) {
                                if (res) {
                                    layer.msg('删除成功！');
                                    //执行重载
                                    tbreload();
                                }
                            });
                        }
                        break;
                }
            });

            //监听工具条
            table.on('tool(menus)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data, //获取当前行数据
                    layEvent = obj.event; //获取lay-event对应的值
                // var tr = obj.tr; //获取当前行tr的DOM对象
                //layer.msg('test');
                if (layEvent === 'look') {
                    layer.msg('查看');
                } else if (layEvent === 'edit') {
                    layer.msg('编辑');
                } else {
                    var ids = new Array(1);
                    ids[0] = data.id;
                    $.post('/menu/del', {'ids': ids}, function (res) {
                        if (res) {
                            layer.msg('删除成功！');
                            //执行重载
                            tbreload();
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>